<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <link rel="Bookmark" href="favicon.ico" >
    <link rel="Shortcut Icon" href="favicon.ico" />
    <title th:text="${platformName}"></title>
    <link href="css/main.css" rel="stylesheet">
    <link href="css/flatpickr.material_green.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <img src="img/sms.png" class="logo">

    <div class="quantity-box">
        <div class="quantity">
            总量：<span th:text="${total}"></span>
        </div>
        <div class="quantity">
            发送中：<span th:text="${totalSending}"></span>
        </div>
        <div class="quantity">
            发送成功：<span th:text="${totalSuccess}"></span>
        </div>
        <div class="quantity">
            发送失败：<span th:text="${totalError}"></span>
        </div>
        <div class="quantity">
            今日数量：<span th:text="${totalToday}"></span>
        </div>
    </div>


    <form method="get" action="/admin" class="search-form">
        <input name="pn" id="pn" value="0" type="hidden">
        <div class="form-group">
            <label>手机号</label>
            <input name="phone" th:value="${param.phone}">
        </div>
        <div class="form-group">
            <label>状态</label>
            <select name="status" th:value="${param.status}" id="status">
                <option value="">全部</option>
                <option value="0">发送中</option>
                <option value="1">成功</option>
                <option value="2">失败</option>
            </select>
        </div>
        <div class="form-group">
            <label>开始时间</label>
            <input name="beginTime" class="calendar" th:value="${param.beginTime}" readonly data-date-format="Y-m-d">
        </div>
        <div class="form-group">
            <label>结束时间</label>
            <input name="endTime" class="calendar" th:value="${param.endTime}" readonly data-date-format="Y-m-d">
        </div>
        <div class="btn-group">
            <button type="submit" id="searchBtn">查询</button>
            <button type="button" class="btn-out" onclick="window.location.href='/logout'">退出页面</button>
        </div>
    </form>

    <table class="table-border">
        <tr>
            <th>手机号</th>
            <th>模板id</th>
            <th>内容</th>
            <th>通道</th>
            <th>状态</th>
            <th>ip</th>
            <th>创建时间</th>
            <th>成功时间</th>
        </tr>
        <tr th:each="c : ${page.content}">
            <td th:text="${c.phone}"></td>
            <td th:text="${c.templateId}"></td>
            <td th:text="${c.content}"></td>
            <td th:text="${c.channel}"></td>
            <td th:text="${c.status=='0'?'发送中':c.status=='1'?'成功':'失败'}"></td>
            <td th:text="${c.ip}"></td>
            <td th:text="${#dates.format(c.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${#dates.format(c.successTime,'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
    </table>


    <ul class="page">
        <li th:class="${pn==1}?'disabled' : ''"><a th:attr="pn=${pn-1}">上一页</a></li>
        <li th:if="${pn-3 >=1}" ><a th:attr="pn=${pn-3}" th:text="${pn -3}" >1</a></li>
        <li th:if="${pn-2 >=1}" ><a th:attr="pn=${pn-2}" th:text="${pn -2}" >1</a></li>
        <li th:if="${pn-1 >=1}" ><a th:attr="pn=${pn-1}" th:text="${pn -1}" >1</a></li>
        <li class="active"><a th:attr="pn=${pn}" th:text="${pn}" >1</a></li>
        <li th:if="${pn+1 <=totalPage}" ><a th:attr="pn=${pn+1}" th:text="${pn +1}" >1</a></li>
        <li th:if="${pn+2 <=totalPage}" ><a th:attr="pn=${pn+2}" th:text="${pn +2}" >1</a></li>
        <li th:if="${pn+3 <=totalPage}" ><a th:attr="pn=${pn+3}" th:text="${pn +3}" >1</a></li>

        <li th:class="${pn==totalPage}?'disabled' : ''" ><a th:attr="pn=${pn+1}">下一页</a></li>
    </ul>
    <div class="pull-right text-left" style="margin-top: 1em">
        总页数：<span th:text="${totalPage}"></span>&nbsp;&nbsp;
        总记录：<span th:text="${totalCount}"></span>
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/flatpickr.js"></script>

<script type="text/javascript">
    $(function () {
        $(".disabled").attr("disabled",true);

        $("#status").val($("#status").attr("value"));

        $(".calendar").flatpickr();

        $(".page li").click(function () {
            var cls = $(this).attr("class");
            if(!!cls && cls.indexOf("disabled") != -1){
                return;
            }
            var pn = $(this).find("a").attr("pn");
            $("#pn").val(Number(pn)-1);
            $("#searchBtn").click();
        })
    })
</script>

</body>
</html>